import React, { useEffect, useState } from "react";
import { Layout } from "antd";
const { Header } = Layout;
import logo from "../assets/hytAssets/logo.jpg";
import "../styles/base.css";
import { format } from "date-fns";

const AntHeader = ({ style }) => {
  const [storedUserInfo, setStoredUserInfo] = useState(null);
  const [formattedCtime, setFormattedCtime] = useState("");

  useEffect(() => {
    // 从 localStorage 获取用户信息
    const userInfo = localStorage.getItem("userInfo");

    // const formattedDate = useFormattedDate("2023-06-19T15:55:43.000Z");
    if (userInfo) {
      const date = new Date(JSON.parse(userInfo).ctime);
      // 使用 date-fns 的 format 函数格式化日期
      const formattedDate = format(date, "yyyy-MM-dd HH:mm:ss");
      setFormattedCtime(formattedDate);
      setStoredUserInfo(JSON.parse(userInfo));
    }
  }, []);

  // 渲染前确保 storedUserInfo 存在
  if (!storedUserInfo) {
    return (
      <Header style={style}>
        <img className="logo" src={logo} alt="Logo" />
        <div className="userInfo">
          <span>Loading...</span>
        </div>
      </Header>
    );
  }

  return (
    <Header style={style}>
      <img className="logo" src={logo} alt="Logo" />
      <div className="userInfo">
        <span>{formattedCtime}</span>
        <img className="userImg" src={storedUserInfo.head} alt="User" />
        <div className="userName">
          <p>{storedUserInfo.name}</p>
          <p>{storedUserInfo.purview}</p>
        </div>
      </div>
    </Header>
  );
};

export default AntHeader;
